

import React, { useEffect, useState, useRef } from 'react'
import { Row, Col, Form, Input, Button, Modal, Typography, Select, Table, Tag, Space, Popconfirm } from "antd"
import { observer } from 'mobx-react'
import { ColumnsType } from 'antd/lib/table';
import Avatar from 'antd/lib/avatar/avatar';
import { baseURL } from '../../api/request';
import { UserOutlined, PhoneOutlined } from '@ant-design/icons';
import { ajax } from '../../api';
import { reg } from '../../utils/validate';
import vip from '../../mobx/store/vip';
const { Title } = Typography
const { Column, ColumnGroup } = Table

function VipList() {

    const { vipList, changevipList, vipQuery, vipgetUserList } = vip
    useEffect(() => {
        changevipList({})
    }, [])
    const [show, setShow] = useState<boolean>(false)
    const [obj, setObj] = useState<any>({})
    const keyword: any = useRef()
    const todoStartSearch = (value: any) => {
        const kw = keyword.current.state.value;
        console.log(kw);
        vipQuery({
            keyword: kw
        })



    }

    const columns: ColumnsType<any> = [
        {
            title: '#',
            render: (text: any, value: any, index: number) => <b>{index + 1}</b>,
            width: 60,
            align: 'center'
        },
        {
            title: "会员名",
            dataIndex: "username",
            key: "username",
            render: (text: any) => <b>{text}</b>,
            align: "center",
            width: 160,
        },
        {
            title: "邮箱",
            dataIndex: "email",
            key: "email",
            align: "center",
            width: 200,
            render: (text: any) => <b>{text}</b>,
        },
        {
            title: "性别",
            dataIndex: "gender",
            key: "gender",
            align: "center",
            width: 80,
            render: (text: any) => <b>{text}</b>,
        },
        {
            title: "年龄",
            dataIndex: "age",
            key: "age",
            align: "center",
            width: 80,
            render: (text: any) => <b>{text}</b>,
        },
        {
            title: "手机号码",
            dataIndex: "phone",
            key: "phone",
            align: "center",
            render: (text: any) => <b>{text}</b>,
        },

        {
            title: "操作",

            align: "center",
            render: (text: any, item: any) => {
                return (
                    <div>
                        <Button size="small" type="primary" style={{ margin: "0 10px" }} onClick={() => showModal(item)}> 修改 </Button>
                        <Popconfirm
                            title="你真的要删除吗?"
                            onConfirm={() => confirm(item)}
                            okText="确定"
                            cancelText="不了"
                        >
                            <Button danger size="small" style={{ margin: "0 3px" }}> 删除 </Button>
                        </Popconfirm>
                    </div>
                )
            }
        }

    ]
    const handleChange = (value: any) => {
        console.log(`selected ${value}`);
    }

    const showModal = (item: any) => {
        setShow(true)
        form.setFieldsValue({
            username: item.username,
            email: item.email,
            phone: item.phone,

        })
        setObj(item)

    }
    const [form] = Form.useForm()
    const confirm = async (item: any) => {
        let { code, result }: any = await ajax.vipdeleteuser({
            _id: item._id
        })
        if (code == 200) {
            var list = vipList.filter((val: any) => val._id != item._id)
            vipgetUserList(list)
        }



    }

    const conformSet = async () => {
        const data = form.getFieldsValue()
        console.log(data)
        const { code, result }: any = await ajax.vipchangeinfo({
            ...data,
            _id: obj._id
        })
        if (code == 200) {
            var list = vipList.map((item: any) => {
                if (item._id == obj._id) {
                    item.username = data.username
                    item.email = data.email
                    item.phone = data.phone
                }
                return item
            })
            vipgetUserList(list)
            setShow(false)
        }



    }

    const handleCancel = () => {
        setShow(false)
    }
    return (
        <div style={{ height: "100%" }}>
            <Title level={2}>会员列表</Title>
            <Row>
                <Col span={6}>
                    <Input placeholder='请输入搜索关键字' ref={keyword} ></Input>
                </Col>
                <Col span={6} offset={1}>
                    <Button danger onClick={todoStartSearch} >搜索</Button>
                </Col>
            </Row>
            <Row style={{ marginTop: 10 }}>
                <Col span={18}>
                    <Table dataSource={vipList}
                        columns={columns}
                        sticky
                        bordered
                        id="table"
                        pagination={{ pageSize: 6 }}
                        rowKey={item => item._id}
                    >

                    </Table>
                </Col>

            </Row>
            <Modal
                title={"修改用户信息 "}
                visible={show}
                onOk={conformSet}
                onCancel={handleCancel}
                okText="确定修改"
                okType="danger"
                width={'30%'}
                cancelText="取消修改"
            >
                <Form
                    name="basic"
                    autoComplete="off"
                    form={form}
                    layout={'horizontal'}
                    labelCol={{ span: 24 }}
                    wrapperCol={{ span: 24 }}

                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[
                            { required: true, message: '请输入用户名!' }
                        ]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
                    </Form.Item>
                    <Form.Item
                        label="邮&emsp;&emsp;箱"
                        name="email"
                        rules={[{ required: true, message: '请输入邮箱!' }, {
                            pattern: reg.email,
                            message: '请输入正确的邮箱'
                        }]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入邮箱" />
                    </Form.Item>
                    <Form.Item
                        label="手机号码"
                        name="phone"
                        rules={[
                            { required: true, message: '请输入手机号!' },
                            {
                                pattern: reg.phone,
                                message: '请输入正确的手机号码'
                            }
                        ]}
                    >

                        <Input prefix={<PhoneOutlined className="site-form-item-icon" />} placeholder="请输入手机号" />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}

export default observer(VipList)